<template>
	<div>
		<el-descriptions :title="`批次号:${nowData.id}`" :column="2">
			<el-descriptions-item label="变更人">
				{{ nowData.changePerson }}
			</el-descriptions-item>
			<el-descriptions-item label="变更内容">
				{{ nowData.changeContent }}
			</el-descriptions-item>
			<el-descriptions-item label="变更时间">
				{{ nowData.changeDate }}
			</el-descriptions-item>
			<el-descriptions-item label="变更所属单位">
				{{ nowData.changePersonUnit }}
			</el-descriptions-item>
		</el-descriptions>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card>
					<p>变更材料</p>
					<AplidForm ref="formRef" v-bind="rechangeFormConfig" v-model="formModel" @reset="onReset" @submit="onSubmit">
						<template #tipForm>
							<p v-if="!formModel.changeMaterials" class="text-red f14 tc">请尽快补充说明材料，负责会有被管理员拒绝的风险</p>
						</template>
					</AplidForm>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<p>变更数据</p>
					<LogList :batchNumber="batchNumber"></LogList>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import LogList from './LogList.vue'
import { rechangeFormConfig } from './config'
import {ElMessage} from 'element-plus'
const props = defineProps({
	batchNumber: {
		type: String,
	},
})
const emit = defineEmits(['refresh'])
const nowData: any = ref({})
const formModel = ref({
	changeDescription: '',
	changeMaterials: '',
})

const onReset = () => {
	emit('refresh')
}
const onSubmit = (form, done) => {
	const params = {
		id: props.batchNumber,
		...form,
	}
	apiMod
		.view_dpDataChange_edit(params)
		.then((res) => {
			ElMessage.success('操作成功!')
			done()
		})
		.catch((err) => {
			done()
		})
}
const getInitData = () => {
	apiMod
		.view_dpDataChange_page({
			id: props.batchNumber,
		})
		.then((res) => {
			const data = res.data
			nowData.value = data.records[0] || {}
			formModel.value.changeDescription = nowData.value.changeDescription
			formModel.value.changeMaterials = nowData.value.changeMaterials
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped></style>
